<template>
	<view v-if="showAccount">
		<uni-popup
			ref="timePickRef"
			@maskClick="closePopup()"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title mt20">
					选择收款账号
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<view class="popup-contents">
					<view class="df addAccount ac" @click="handlerAdd">
						<view class="icon df ac jsc">+</view>
						<view class="text">添加收款账号</view>
					</view>
					<scroll-view
						class="scroll-view"
						scroll-y="true"
						lower-threshold="30"
						@scrolltolower="loadMore()"
					>
						<view class="scroll-empty"></view>
						<view
							v-for="item in list"
							:key="item.id"
							class="jsb df ac list"
							@click="handlerAccount(item)"
						>
							<view class="df ac">
								<!-- <view class="icon">
                  <image
                    class="img"
                    src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/3376/131094/ORG/1dk2qlqv6yqvienls0wnncxi1.jpg?timestamp=1686641305801"
                  ></image>
                </view> -->
								<view class="accountContent">
									<view class="name">{{ item.name }}</view>
									<view class="bankName">
										{{ item.bankName }}({{
											item.cardNo.slice(-4)
										}})
									</view>
								</view>
							</view>
							<view class="df operate ac">
								<text
									v-if="accountValue.id === item.id"
									class="select"
									>当前选择</text
								>
								<view
									class="edit"
									@tap.stop="handlerEdit(item.id)"
								></view>
							</view>
						</view>
						<uni-load-more
							:contentText="contentText"
							:status="status"
						></uni-load-more>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<add-account
			@close="closeAccount"
			:infoValue="infoValue"
			:title="title"
			:showAddAccount="isShowAddAccount"
		></add-account>
	</view>
</template>
<script>
import {
	findcostAccountInfoPage,
	getcostAccountInfoById,
} from '@/subPackagesIndex/pages/index/approval/launch/apis/account.js'
import addAccount from '@/subPackagesIndex/components/addAccount/addAccount.vue'
export default {
	props: {
		showAccount: {
			type: Boolean,
			value: false,
			default: false,
		},
		accountValue: {
			type: [Object, Array, String],
		},
	},
	components: {
		addAccount,
	},
	data() {
		return {
			list: [],
			status: 'more',
			pageInfo: {
				pageIndex: 1,
				pageSize: 10,
				total: 0,
			},
			isShowAddAccount: false,
			infoValue: {},
			title: '',
		}
	},
	onReady() {},
	computed: {
		contentText() {
			return {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: this.list.length > 0 ? ' ' : '暂无数据',
			}
		},
	},
	methods: {
		openPopup() {
			this.getList()
			this.$refs.timePickRef.open('bottom')
		},
		closePopup() {
			this.$refs.timePickRef.close()
			this.$emit('close')
		},
		loadMore() {
			if (this.list.length < this.pageInfo.total) {
				this.pageInfo.pageIndex = this.pageInfo.pageIndex + 1
				this.getList()
			}
		},
		getList() {
			let params = {
				...this.pageInfo,
			}
			this.status = 'loading'
			findcostAccountInfoPage(params).then((res) => {
				const { data } = res
				this.pageInfo.total = data.total || 0
				if (this.pageInfo.pageIndex == 1 && data.total == 0) {
					this.list = []
					this.status = 'noMore'
					return
				}
				if (data.data && data.data.length > 0) {
					if (this.pageInfo.pageIndex == 1) {
						this.list = data.data
					} else {
						this.list = this.list.concat(data.data)
					}
					if (this.list.length >= this.pageInfo.total) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
				} else {
					this.status = 'noMore'
				}
			})
		},
		handlerAccount(item) {
			this.$emit('handlerAccount', item)
			this.closePopup()
		},
		handlerAdd() {
			this.title = '添加个人银行卡'
			this.infoValue = {}
			this.openAccount()
		},
		openAccount() {
			this.isShowAddAccount = true
		},
		closeAccount() {
			this.isShowAddAccount = false
			this.getList()
		},
		handlerEdit(id) {
			getcostAccountInfoById({ id }).then((res) => {
				const { data } = res
				this.infoValue = Object.assign({}, { ...data, id })
				this.title = '编辑个人银行卡'
				this.openAccount()
			})
		},
	},
	watch: {
		showAccount(val) {
			if (val) {
				this.pageInfo.pageIndex = 1
				this.openPopup()
			} else {
				this.closePopup()
			}
		},
		accountValue: {
			immediate: true,
			handler(val, old) {
				//console.log("ppjval:", val, old);
			},
		},
	},
}
</script>
<style scoped lang="scss">
.popup-bd {
	height: calc(100vh - 500rpx);
}
.picker-view {
	text-align: center;
}
.item {
	line-height: 100rpx;
	text-align: center;
}
.active {
	color: $primary-color;
}
.duo {
	width: 100%;
	height: 120rpx;
}
.popup-contents {
	padding: 0 32rpx;
	.addAccount {
		padding: 20rpx 0 40rpx;
		.icon {
			height: 50rpx;
			width: 50rpx;
			line-height: 50rpx;
			background: #93d2f3;
			color: #ffffff;
			font-weight: 700;
			font-size: 48rpx;
			border-radius: 50%;
		}
		.text {
			font-size: 32rpx;
			color: #252525;
			margin-left: 40rpx;
		}
	}
}
.scroll-view {
	height: calc(100vh - 780rpx);
}
.scroll-empty {
	width: 100%;
	height: 16rpx;
}
.list {
	margin-bottom: 56rpx;
	.icon {
		.img {
			width: 66rpx;
			height: 66rpx;
			border-radius: 50%;
		}
		margin-right: 34rpx;
	}
	.accountContent {
		font-size: 32rpx;
		line-height: 26rpx;
		padding-left: 30rpx;
		.name {
			color: #525252;
			margin-bottom: 22rpx;
		}
		.bankName {
			color: #a3a3a3;
		}
	}
}
.operate {
	.select {
		font-size: 32rpx;
		color: #a3a3a3;
		margin-right: 10rpx;
	}
	.edit {
		width: 32rpx;
		height: 32rpx;
		background: url('https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130846/ORG/x1kd6zaphrq5t636cy07hced6.png?timestamp=1688361012961')
			no-repeat center/100%;
	}
}
</style>
